<template>
    <div class="home">
        <Topnav/>
        <div class="banner">
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shuidi"></use>
                </svg>
                <h1>DropUI</h1>
            </a>
            <span>基于 Vue3.0 的轻量、极简UI组件库</span>
            <p class="actions">
                <router-link to="/doc/introduce">开始</router-link>
                <a href="https://gitee.com/zhangdeshou/drop-ui" class="plain">Github</a>
            </p>
        </div>
        <main>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-vue"></use>
            </svg>
            <div>
                <h2>基于Vue 3</h2>
                <p>骄傲的使用了Vue 3 Composition API</p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ts"></use>
            </svg>
            <div>
                <h2>基于TypeScript</h2>
                <p>源代码采用TypeScript书写(非严格检查)</p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-light"></use>
            </svg>
            <div>
                <h2>代码易读</h2>
                <p>每个组件的源代码都极其简洁</p>
            </div>
        </main>
        <footer>MIT Licensed | Copyright © 2020-present zhangdeshou</footer>
    </div>
</template>
<script>
    import Topnav from "../components/Topnav.vue"

    export default {
        components: {Topnav}
    }
</script>

<style lang="scss" scoped>
    .home {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        text-align: center;
    }

    .banner {
        flex-grow: 1;
        padding-top: 10%;

        svg {
            width: 200px;
            height: 200px;
        }

        h1 {
            margin-top: 25px;
            font-weight: 400;
        }

        span {
            display: inline-block;
            margin-top: 10px;
        }

        a{
            border: none;
        }
        .actions {
            margin-top: 50px;

            a {
                display: inline-block;
                margin: 0 10px;
                width: 130px;
                height: 40px;
                line-height: 40px;
                background: #50a0ff;
                color: #fff;
                border-radius: 30px;

                &.plain {
                    border: 2px solid #50a0ff;
                    background: #fff;
                    color: #50a0ff;
                }
            }
        }

        @media (max-width: 500px) {
            padding-top: 100px;
            .actions {
                margin-top: 20px;
            }
            img {
                width: 100px;
            }
        }
    }


    main {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        border-top: 1px solid #eee;
        padding: 20px 0 20px 0;

        svg {
            width: 70px;
            height: 70px;
        }

        > div {
            display: flex;
            flex-direction: column;
            width: 20%;
            text-align: left;
            margin-left: 10px;

            h2 {
                margin-bottom: 15px;
            }
        }

        @media (max-width: 500px) {
            display: flex;
            flex-direction: column;
            border: none;
            padding: 40px 0 20px 0;
            svg {
                width: 100%;
                height: 70px;
            }
            > div {
                width: 100%;
                text-align: center;
                margin-bottom: 30px;
            }
        }
    }

    footer {
        font-size: 14px;
        height: 40px;
    }

</style>
